<template>
	<div class="container">
		<a-form :form="form" @submit="handleSubmit">
			<div class="route">
				<div class="route_choice">
					<a-form-item label="请选择货盘类型"  :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
						<a-radio-group v-decorator="['palletTypeValue', {initialValue:'a'}]" buttonStyle="solid" @change="radio_change">
					        <a-radio-button value="a" >海运整箱</a-radio-button>
					        <a-radio-button value="b">海运拼箱</a-radio-button>
					        <a-radio-button value="c">海运散杂</a-radio-button>
					        <a-radio-button value="d">空运</a-radio-button>
					        <a-radio-button value="e">公路</a-radio-button>
					        <a-radio-button value="f">铁路</a-radio-button>
					        <a-radio-button value="g">仓储配送</a-radio-button>
					        <a-radio-button value="h">报关报检</a-radio-button>
					        <a-radio-button value="t">多式联运</a-radio-button>
					    </a-radio-group>
					</a-form-item>
				</div>
				<div class="route_choice">
					<a-row>
						<a-col :span="8">
							<a-form-item v-if="show_qy" label="起运地" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
								<a-input readOnly @click="departureShowMap" v-decorator="[ 'fromCity', {rules: [{ required: true, message: '起运地不能为空!' }]}]" placeholder='请输入起运地' ref="userNameInput">
									<a-icon type="environment" slot="suffix" style="color: #15837A;" />
								</a-input>
							</a-form-item>
							<a-form-item v-if="show_name" label="货物品名" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
								<a-input v-decorator="['cargoName', {rules: [{ required: true, message: '货物品名不能为空！' }]}]" placeholder="请输入货物品名" />
							</a-form-item>
						</a-col>
						<a-col :span="16">
							<a-form-item v-if="show_qy" label="目的地" :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }">
								<a-input readOnly @click="destinationShowMap" class="wy-input" v-decorator="[ 'toCity', {rules: [{ required: true, message: '目的地不能为空!' }]}]" placeholder='请输入目的地'>
									<a-icon type="environment" slot="suffix" style="color: #FF2F47;" />
								</a-input>
							</a-form-item>
							<a-form-item v-if="show_size" label="总重量" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
								<a-input style="width: 10%;" v-decorator="['weight']" />
								<a-select style="width: 10%;margin-left: 10px;" v-decorator="[ 'weightUnit']" @change="getMap">
									<a-select-option value="0">
										吨
									</a-select-option>
									<a-select-option value="1">
										公斤
									</a-select-option>
								</a-select>
								<span style="margin-left: 10px;">货物体积：</span>
								<a-input style="width: 10%;" v-decorator="['volume']" />
								<span style="margin-left: 10px;">立方米</span>
							</a-form-item>
						</a-col>
					</a-row>
					<a-form-item v-if="show_jztype" label="集装箱类型" :label-col="{ span: 3 }" :wrapper-col="{ span: 5 }">
						<a-select  v-decorator="[ 'type']" @change="getMap">
							<a-select-option value="male">
								GP普箱
							</a-select-option>
							<a-select-option value="female">
								轻货
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item v-if="show_xl" label="箱量" :label-col="{ span: 3 }" :wrapper-col="{ span: 10 }">
						<a-input style="width: 10%;" v-decorator="['note']" />
						<span> x20' </span>
						<a-input style="width: 10%;" v-decorator="['note']" />
						<span> x40' </span>
						<a-input style="width: 10%;" v-decorator="['note']" />
						<span> x40HQ </span>
						<a-input style="width: 10%;" v-decorator="['note']" />
						<span> x45' </span>
					</a-form-item>
					<a-form-item v-if="show_fs" label="运输方式" :label-col="{ span: 3 }" :wrapper-col="{ span: 10 }">
						<a-radio-group v-decorator="['radio-group']">
							<a-radio value="1">
								门到门
							</a-radio>
							<a-radio value="2">
								机场到机场
							</a-radio>
							<a-radio value="3">
								其他
							</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item v-if="show_xq" label="车辆需求" :label-col="{ span: 3 }" :wrapper-col="{ span: 10 }">
						<a-select style="width: 30%;"  v-decorator="[ 'type' , {rules: [{ required: true, message: '请选择车辆需求！' }]}]" @change="getMap" placeholder="车长">
							<a-select-option value="male">
								车长
							</a-select-option>
						</a-select>
						<a-select  style="width: 30%;margin-left: 10px;" v-decorator="[ 'type', {rules: [{ required: true, message: '请选择车辆需求！' }]}]" @change="getMap" placeholder="选择车辆类型">
							<a-select-option value="male">
								选择车辆类型
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item v-if="show_cptype" label="车皮类型" :label-col="{ span: 3 }" :wrapper-col="{ span: 5 }">
						<a-select  v-decorator="[ 'type']" @change="getMap">
							<a-select-option value="male">
								敞车
							</a-select-option>
							<a-select-option value="female">
								轻货
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item v-if="show_zt" label="信息主题" :label-col="{ span: 3 }" :wrapper-col="{ span: 5 }">
						<a-input v-decorator="['Consignor', {rules: [{ required: true, message: '起运地不能为空！' }]}]" placeholder="请输入起运地" />
					</a-form-item>
					<a-form-item v-if="show_szd" label="所在地" :label-col="{ span: 3 }" :wrapper-col="{ span: 5 }">
						<a-input v-decorator="['Consignor', {rules: [{ required: true, message: '起运地不能为空！' }]}]" placeholder="请输入起运地" />
					</a-form-item>
					<a-form-item v-if="show_cctype" label="仓储类型" :label-col="{ span: 3 }" :wrapper-col="{ span: 5 }">
						<a-input v-decorator="['Consignor', {rules: [{ required: true, message: '起运地不能为空！' }]}]" placeholder="请输入起运地" />
					</a-form-item>
					<a-form-item v-if="show_fw" label="服务项目" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
						<a-checkbox-group v-decorator="['checkbox-group', {initialValue: ['A', 'B']}]" style="width: 100%;">
							<a-checkbox value="1">
								私人物品
							</a-checkbox>
							<a-checkbox value="2">
								特种物品
							</a-checkbox>
							<a-checkbox value="3">
								海外清关
							</a-checkbox>
							<a-checkbox value="4">
								普通货物
							</a-checkbox>
						</a-checkbox-group>
					</a-form-item>
					<a-form-item v-if="show_ylfs" label="联运方式" :label-col="{ span: 3 }" :wrapper-col="{ span: 10 }">
						<a-radio-group v-decorator="['radio-group', {rules: [{ required: true, message: '起运地不能为空！' }]}]">
							<a-radio value="1">
								海铁联运
							</a-radio>
							<a-radio value="2">
								海空联运
							</a-radio>
							<a-radio value="3">
								陆桥联运
							</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item label="联系人" :label-col="{ span: 3 }" :wrapper-col="{ span: 5 }">
						<a-input v-decorator="['linkMan', {rules: [{ required: true, message: '起运地不能为空！' }]}]" placeholder="请输入起运地" />
					</a-form-item>
					<a-form-item label="联系方式" :label-col="{ span: 3 }" :wrapper-col="{ span: 5 }">
						<a-input v-decorator="['linkMoble', {rules: [{ required: true, message: '起运地不能为空！' }]}]" placeholder="请输入起运地" />
					</a-form-item>
					<a-form-item label="有效截至日期" :label-col="{ span: 3 }" :wrapper-col="{ span: 11 }">
						<a-date-picker style="width: 45%;" v-decorator="['validDate']" placeholder='请选择有效截至日期' show-time format="YYYY-MM-DD HH:mm:ss" />
					</a-form-item>
					<a-form-item label="备注" :label-col="{ span: 3 }" :wrapper-col="{ span: 11 }">
						<a-textarea  placeholder="请描述您对此货盘信息的补充内容(200宇以内)。"  v-decorator="['remark']" :rows="3" />
						<span>(已编辑字数：0 字)</span>
					</a-form-item>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 20px; " />
				<div class="ant-row ant-form-item">
					<div class="ant-col-2 ant-form-item-label"></div>
					<div class="ant-col-22 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
								<a-checkbox v-model="agreement">
									<!--本人保证: 以上填写内容和材料附件真实无误，若填写或提供任何错误、不实或不完整的资料导致发生任何经济及法律纠纷， 本人愿承担一切责任！-->
									我已阅读并接受<a href="JavaScript:;">《云南省国际物流云平台务务协议》</a><a href="JavaScript:;">《网络用户信息保密协议》</a>
								</a-checkbox>
							</span>
						</div>
					</div>
				</div>
				<div class="ant-row ant-form-item">
					<div class="ant-col-2 ant-form-item-label"></div>
					<div class="ant-col-10 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
								<a-button type="primary" html-type="submit" :disabled="!agreement" style="width: 280px;height:50px;margin-top: -10px;">
									立即发布
								</a-button>
							</span>
						</div>
					</div>
				</div>
			</div>
		</a-form>
		<!--地图Svg显示位置-->
		<map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
	</div>
</template>
<script>
	import MapSvg from '@/components/dialog/MapSvg'
	import { mapState } from 'vuex'
	
	export default {
		data() {
			return {
				agreement:false,
				// 地图存起止数据
				departureData: {},
				destinationData: {},
				distance: '',
				
				show_qy:true,
				show_name:true,
				show_size:true,
				show_jztype:true,
				show_xl:true,
				show_fs:false,
				show_xq:false,
				show_cptype:false,
				show_zt:false,
				show_szd:false,
				show_cctype:false,
				show_fw:false,
				show_ylfs:false,
				
				form: this.$form.createForm(this),
			}
		},
		computed: {},
		beforeCreate() {},
		created() {
			console.log(this.detail,'asjd')
		},
		components: {
			// Footer
			MapSvg
		},
		watch: {},

		mounted: function() {

		},
		props: {
			detail:{}
		},
		methods: {
			// 省市地图回调
			mapSvgCall(d) {
				if (d.name === 'departure') {
					this.form.setFieldsValue({
						fromCity: d.provCityArea
					});
					this.departureData = Object.assign({}, d);
					console.log(this.departureData, 898888)
				}
				if (d.name === 'destination') {
					this.form.setFieldsValue({
						toCity: d.provCityArea
					});
					this.destinationData = Object.assign({}, d);
				}
				if (d.name === 'departureStreet') {
					this.form.setFieldsValue({
						departureStreet: d.address
					});
				}
				if (d.name === 'destinationStreet') {
					this.form.setFieldsValue({
						destinationStreet: d.address
					});
				}
				//				this[d.name] = d.address;
				this.getDistanceCount();
			},
			// 选择出发地
			departureShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
			},
			// 选择到达地
			destinationShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('destination', 2, '', '', '');
			},
			// 起运地到目的地的距离
			getDistanceCount() {
				if (this.departureData.point && this.destinationData.point) {
					this.$refs.mapSvgDialog.distanceCount(this.departureData.point, this.destinationData.point);
				}
			},
			// 调用距离返回
			distanceCall(num) {
				console.log(num)
				this.distance = num
				//				 this.form.setFieldsValue({ juliNum: num });
			},
			getMap() {

			},
			radio_change(e){
				console.log(e)
				if(e.target.value == 'a'){
					this.show_qy = true
					this.show_name = true
					this.show_size = true
					this.show_jztype = true
					this.show_xl = true
					this.show_fs = false
					this.show_xq = false
					this.show_cptype = false
					this.show_zt = false
					this.show_szd = false
					this.show_cctype = false
					this.show_fw = false
					this.show_ylfs = false
				}else if(e.target.value == 'b'){
					this.show_qy = true
					this.show_name = true
					this.show_size = true
					this.show_jztype = true
					this.show_xl = false
					this.show_fs = false
					this.show_xq = false
					this.show_cptype = false
					this.show_zt = false
					this.show_szd = false
					this.show_cctype = false
					this.show_fw = false
					this.show_ylfs = false
				}else if(e.target.value == 'c'){
					this.show_qy = true
					this.show_name = true
					this.show_size = true
					this.show_jztype = false
					this.show_xl = false
					this.show_fs = false
					this.show_xq = false
					this.show_cptype = false
					this.show_zt = false
					this.show_szd = false
					this.show_cctype = false
					this.show_fw = false
					this.show_ylfs = false
				}else if(e.target.value == 'd'){
					this.show_qy = true
					this.show_name = true
					this.show_size = true
					this.show_jztype = false
					this.show_xl = false
					this.show_fs = true
					this.show_xq = false
					this.show_cptype = false
					this.show_zt = false
					this.show_szd = false
					this.show_cctype = false
					this.show_fw = false
					this.show_ylfs = false
				}else if(e.target.value == 'e'){
					this.show_qy = true
					this.show_name = true
					this.show_size = true
					this.show_jztype = false
					this.show_xl = false
					this.show_fs = false
					this.show_xq = true
					this.show_cptype = false
					this.show_zt = false
					this.show_szd = false
					this.show_cctype = false
					this.show_fw = false
					this.show_ylfs = false
				}else if(e.target.value == 'f'){
					this.show_qy = true
					this.show_name = true
					this.show_size = true
					this.show_jztype = false
					this.show_xl = false
					this.show_fs = false
					this.show_xq = false
					this.show_cptype = true
					this.show_zt = false
					this.show_szd = false
					this.show_cctype = false
					this.show_fw = false
					this.show_ylfs = false
				}else if(e.target.value == 'g'){
					this.show_qy = false
					this.show_name = true
					this.show_size = false
					this.show_jztype = false
					this.show_xl = false
					this.show_fs = false
					this.show_xq = false
					this.show_cptype = false
					this.show_zt = true
					this.show_szd = true
					this.show_cctype = true
					this.show_fw = false
					this.show_ylfs = false
				}else if(e.target.value == 'h'){
					this.show_qy = false
					this.show_name = true
					this.show_size = false
					this.show_jztype = false
					this.show_xl = false
					this.show_fs = false
					this.show_xq = false
					this.show_cptype = false
					this.show_zt = true
					this.show_szd = true
					this.show_cctype = false
					this.show_fw = true
					this.show_ylfs = false
				}else if(e.target.value == 't'){
					this.show_qy = true
					this.show_name = true
					this.show_size = false
					this.show_jztype = false
					this.show_xl = false
					this.show_fs = false
					this.show_xq = false
					this.show_cptype = false
					this.show_zt = true
					this.show_szd = true
					this.show_cctype = false
					this.show_fw = false
					this.show_ylfs = true
				}
			},
			// 提交保存
			handleSubmit(e) {
				console.log(this.huowuArray)
				if(this.loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						// this.loading = true
						values.cargos = [{
							"cargoName":this.form.getFieldValue('cargoName'),
							"cargoCategoryValue":this.form.getFieldValue('cargoCategoryValue'),
							"totalNums":this.form.getFieldValue('totalNums'),
							"totalNums":this.form.getFieldValue('totalNums'),
							"weightUnit":this.form.getFieldValue('weightUnit'),
							"weight":this.form.getFieldValue('weight'),
							"cargoType":this.form.getFieldValue('cargoType'),
							"volume":this.form.getFieldValue('volume'),
						}]
						values.type  = 4
						values.userId = this.user.userId
						if(values.validDate){
							values.validDate  = values.validDate .format('YYYY-MM-DD HH:mm:ss')
						}
//						values.linkmen = []
//						if(this.addDeliver == true){
//							values.linkmen.push({
//								  "sendPerson": this.form.getFieldValue('sendPerson'),
//								  "sendPersonMobile": this.form.getFieldValue('sendMobile'),
//								  "type": 0,
//								  "userId": this.user.userId
//							})
//						}
//						if(this.addReceiving == true){
//							values.linkmen.push({
//								  "receivePersion": this.form.getFieldValue('receivePerson'),
//								  "receivePersonMobile": this.form.getFieldValue('receiveMobile'),
//								  "type": 1,
//								  "userId": this.user.userId
//							})
//						}
						console.log('Received values of form: ', values);
						this.$post('/info/infoCargomaster', values,true).then((r) => {
							console.log(r,8989)
							if(r.status == 200){
								this.$notification.success({
								  message: r.data.message,
								});
								this.form.resetFields();
							}
							this.loading = false;
						}).catch((e) => {
							console.log(e)
							this.loading = false;
						})
					}
				});
			},
		},
		computed: {
			...mapState({
				multipage: state => state.setting.multipage,
				user: state => state.account.user,
			}),
		},
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		height: 100%;
		background: #fff;
		.route {
			.route_text {
				font-size: 12px;
				padding: 0px 30px;
				margin: 0;
			}
			.route_choice {
				width: 100%;
				border: 1px solid #eee;
				padding: 10px;
				margin-top: 10px;
			}
			.route_but{
				width: 100%;
				border: 1px solid #eee;
				padding: 10px 30px;
				margin-top: 10px;
				text-align: center;
			}
		}
	}
</style>